<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>首页</title>
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="js/flexible.min.js"></script>

</head>

<body>
	<div class="container home">
		<!-- Swiper -->
		<div class="swiper-container home-top">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="detail-slide.html">
						<img src="images/home/header01.png" alt="">
						<div class="text">
							中美新冠疫苗
							<span>最全面的客观医学比评!</span>
						</div>
					</a>
				</div>
				<div class="swiper-slide">
					<a href="detail-slide.html">
						<img src="images/home/header02.png" alt="">
						<div class="text white">
							中美新冠疫苗
							<span>最全面的客观医学比评!</span>
						</div>
					</a>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<!-- 产品列表1 -->
		<div class="productList">
			<div class="title">
				<div class="left">热门自由行服务</div>
				<div class="more right" id='more1'>查看更多 ></div>
			</div>
			<ul class="content showThree" id='product1'>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen01.png" alt="">
							<div class="gray">九介HPV</div>
						</div>
						<div class="name">100%进口正货</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen02.png" alt="">
							<div class="gray">冷冻溶脂</div>
						</div>
						<div class="name">无创无痛更安全</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen03.png" alt="">
							<div class="white">5分钟矫正视力</div>
						</div>
						<div class="name">最新飞秒激光技术</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen01.png" alt="">
							<div class="gray">九介HPV</div>
						</div>
						<div class="name">100%进口正货</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen02.png" alt="">
							<div class="gray">冷冻溶脂</div>
						</div>
						<div class="name">无创无痛更安全</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/remen03.png" alt="">
							<div class="white">5分钟矫正视力</div>
						</div>
						<div class="name">最新飞秒激光技术</div>
					</a>
				</li>
				<li class="item hideOther" id="hide1">
					收起 ^
				</li>
			</ul>
		</div>
		<!-- 产品列表2 -->
		<div class="productList">
			<div class="title">
				<div class="left">爆款全城最低价</div>
				<div class="more right" id='more2'>查看更多 ></div>
			</div>
			<ul class="content showThree" id='product2'>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan01.png" alt="">
							<div class="white en-long">G-NiiB免疫力配方</div>
						</div>
						<div class="name">香港中文大学研发</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan02.png" alt="">
							<div class="white">DIMS镜片</div>
						</div>
						<div class="name">减慢/停止儿童近视</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan03.png" alt="">
							<div class="gray en-short">T21无创</div>
						</div>
						<div class="name">唐氏综合征筛查</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan01.png" alt="">
							<div class="white en-long">G-NiiB免疫力配方</div>
						</div>
						<div class="name">香港中文大学研发</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan02.png" alt="">
							<div class="white">DIMS镜片</div>
						</div>
						<div class="name">减慢/停止儿童近视</div>
					</a>
				</li>
				<li class="item">
					<a href="detail-product.html">
						<div class="img-box">
							<img src="images/home/baokuan03.png" alt="">
							<div class="gray en-short">T21无创</div>
						</div>
						<div class="name">唐氏综合征筛查</div>
					</a>
				</li>
				<li class="item hideOther" id="hide2">
					收起 ^
				</li>
			</ul>
		</div>
		<div class="banner">
			<a href="#">
				<img src="images/home/banner.png" alt="">
				<div class="text white">
					香港中文大学研发 | 100%纯天然
					<span>微生态免疫力配方</span>
				</div>
			</a>
		</div>
		<!-- 视频列表 -->
		<div class="productList video-list">
			<div class="title">
				<div class="left">港湾TV</div>
				<div class="more right" id='more3'>查看更多 ></div>
			</div>
			<div class="tips">
				<div>本栏目由港湾进口网络深圳有限公司提供服务</div>
				<span>信息网络传播视听节目许可证 | 编号：2349508</span>
			</div>
			<ul class="content">
				<li class="item video-item">
					<div class="video-box">
						<img class="face" src="images/home/tv01.jpg" alt="">
						<img class="play" src="images/home/play.png" alt="">
						<div class="times">2"15'</div>
					</div>
					<div class="video-title">
						<img class="icon" src="images/home/youtube.png" alt="">
						<div class="tit">
							# 新冠疫苗到底应不应该现在打
							<span>@Youtube</span>
						</div>
						<div class="right">
							<img src="images/home/view.png" alt="">415
						</div>
					</div>
				</li>
				<li class="item video-item">
					<div class="video-box">
						<img class="face" src="images/home/tv02.jpg" alt="">
						<img class="play" src="images/home/play.png" alt="">
						<div class="times">2"15'</div>
					</div>
					<div class="video-title">
						<img class="icon" src="images/home/youtube.png" alt="">
						<div class="tit">
							# 隆胸到底有没有后遗症
							<span>@Youtube</span>
						</div>
						<div class="right">
							<img src="images/home/view.png" alt="">869
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="page-bottom">
			- 我们是有底线的 -
		</div>
	</div>
	<div class="nav-bar">
		<div class="box">
			<a class="menu current" href="home.html">
				<img class="off" src="images/bar/menu1_off.png" alt="">
				<img class="on" src="images/bar/menu1_on.png" alt="">
				首页
			</a>
			<a class="menu" href="tv.html">
				<img class="off" src="images/bar/menu2_off.png" alt="">
				<img class="on" src="images/bar/menu2_on.png" alt="">
				港湾TV
			</a>
			<a class="menu" href="my.html">
				<img class="off" src="images/bar/menu3_off.png" alt="">
				<img class="on" src="images/bar/menu3_on.png" alt="">
				我的
			</a>
		</div>
	</div>

	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination',
			slidesPerView: '1.2',
			paginationClickable: true,
			spaceBetween: 10
		});
		$(function () {
			// 热门
			$('#more1').click(function () {
				$('#product1').removeClass('showThree')
			})
			$('#hide1').click(function () {
				$('#product1').addClass('showThree')
			})
			// 爆款
			$('#more2').click(function () {
				$('#product2').removeClass('showThree')
			})
			$('#hide2').click(function () {
				$('#product2').addClass('showThree')
			})
			// 跳转tv页
			$('#more3').click(function () {
				window.location.href = 'tv.html'
			})
		})
	</script>
</body>

</html>